<template>
  <div>
      <el-card class="card">
            <div slot="header" class="clearfix">
    <span>添加讲师</span>
            </div>
      <el-form  
       :model="thisTeather"
        ref="thisTeatherRef" 
        label-width="120px">
      <el-form-item label="讲师名称">
          <el-input
            v-model="thisTeather.name"
          ></el-input>
        </el-form-item>
        <!-- </el-form-item> -->
       <el-form-item label="讲师排序">
        <el-input-number v-model="thisTeather.sort" controls-position="right" min="0"/>
      </el-form-item>
        <el-form-item label="讲师头衔">
        <el-select v-model="thisTeather.level" clearable placeholder="请选择">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
        <el-form-item
          label="讲师资质"
          prop="career"
        >
          <el-input v-model="thisTeather.career"></el-input>
        </el-form-item>
        <el-form-item
          label="讲师简介"
          prop="intro"
        >
          <el-input v-model="thisTeather.intro"></el-input>
        </el-form-item>
        <!-- 讲师头像 -->
     <el-form-item>
       <!-- 缩略图 -->
        <pan-thumb :image="thisTeather.avatar"/>
        <el-button type="primary" icon="el-icon-cpload" @click="imageCropperShow=ture">更换头像</el-button>
 </el-form-item>
     <el-form-item>
    <el-button type="primary" @click="saveTeacher()">保存</el-button>
    <!-- 上传弹窗 -->
    <image-cropper
    v-show="imageCropperShow"
    :width="300"
    :height="300"
    :key="imageCropperKey"
    :url="BASE_API+'/admin'">

    </image-cropper>
  
  </el-form-item>
      </el-form>
      </el-card>
  </div>
</template>

<script>
import teacherApi from  '@/api/edu/teacher'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
components:{ImageCropper,PanThumb},//声明
data(){
    return{
        thisTeather:{
        name:"",
        intro:"",
        career:"",
        level:1,
        avatar:"",
        sort:""
      },
      // 头像
      imageCropperShow:false
    }
},
created(){
this.init()
},
// 路由监听
watch:{
// 当路由发生跳转
  $route(to,from){
    // 判断一下修改和新增
    this.init()
  }
},
methods:{

    init(){
// 判断路由
    if(this.$route.params && this.$route.params.id){
      // 修改
        const id = this.$route.params.id
        this.ReturnTeacher(id)//回显
    }else{
      // 新增
         this.thisTeather={}

    }
},

  // 回显信息
     ReturnTeacher(id){
        teacherApi.selectThisTeacher(id).then(response =>{
        this.thisTeather=response.data.teacher;
        // console.log(id)
        console.log(this.thisTeather) 

        }).catch(error =>{
        })
    },
    //修改讲师
    EditTeacher(){
      console.log(this.thisTeather.id)
      teacherApi.editTeacher(this.thisTeather).then(response=>{
        this.$message({
          type:'success',
          message:'修改成功'
        });
        // 回到list页面
        this.$router.push({path:'/Learning/teacher/list'})
      }).catch(error=>{

      })
    },
    // 添加讲师
    addTeacher(){
      console.log(this.thisTeather.id)

      teacherApi.saveTeacher(this.thisTeather).then(response=>{
          this.$message({
            type:'success',
            message:'新增成功',
          });
        
          this.$router.push({path:'/Learning/teacher/list'})
      }).catch(error=>{

      });
    },
    // 提交保存
    saveTeacher(){
      if(this.thisTeather.id){
        this.EditTeacher();
      }else{
        this.addTeacher();
      }
      
    }
}
}
</script>

<style>

</style>